<template>
    <view class="login">
        <view class="get_code" @click="getCode">刷新微信logincode</view>
        <view class="copycode">
            <view class="code up-line-2">
                <text style="color: blue;">logincode</text>:{{ loginForm.loginCode }}
            </view>
            <view class="copy" @click="copy(loginForm.loginCode)">复制</view>
        </view>
        <button class="login_btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">一键登录(phoneCode)</button>
        <view class="copycode">
            <view class="code up-line-2">
                <text style="color: blue;">phoneCode</text>:{{ loginForm.phoneCode }}
            </view>
            <view class="copy" @click="copy(loginForm.phoneCode)">复制</view>
        </view>
        <view class="get_code" @click="getToken">获取token</view>
        <view class="copycode">
            <view class="code up-line-2">
                <text style="color: blue;">token</text>:{{ loginForm.token }}
            </view>
            <view class="copy" @click="copy(loginForm.token)">复制</view>
        </view>
    </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from '@/stores';
import { onLoad } from '@dcloudio/uni-app';
import { reactive } from 'vue';

onLoad(() => {
    // getCode()
})

const loginForm = reactive<any>({
    phoneCode: "",
    loginCode: "",
    token: ""
})
// 获取code
const getCode = (() => {
    uni.login({
        success:(res: UniApp.LoginRes)=> {
            console.log(res, "微信code");
            loginForm.loginCode = res.code
        }
    })
})
// 登录授权
const getPhoneNumber = (e: any) => {
    console.log(e, "手机号");
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
        return;
    }
    loginForm.phoneCode = e.detail.encryptedData

}
// 获取token
const getToken = () =>{
    const userInfo = useMemberStore().userInfo
    loginForm.token = userInfo.accessToken
}

// 复制
const copy = ((code: string) => {
    uni.setClipboardData({
        data: code,
        success: function () {
            uni.showToast({
                icon: "none",
                title: '复制成功!',
                duration: 1000
            })
        }
    });
})
</script>

<style lang="scss" scoped>
.login {
    min-height: 100vh;
    overflow: hidden;
    background: #F8F8F8;
}

.get_code {
    width: 622rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #FF9B2B 0%, #FF6000 100%);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(255, 80, 0, 0.57);
    border-radius: 48rpx;
    // position: fixed;
    // left: 64rpx;
    // bottom: 380rpx;
    font-size: 32rpx;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    text-align: center;
    line-height: 96rpx;
    margin: 56rpx auto;
}

.copycode {
    width: 622rpx;
    margin: 20rpx auto;
    display: flex;

    .code {
        width: 500rpx;
    }

    .copy {
        width: fit-content;
        padding: 20rpx 30rpx;
        background-color: #f1e9e9a1;
        color: #222;
        font-size: 28rpx;
    }
}

.login_btn {
    width: 622rpx;
    height: 96rpx;
    background: linear-gradient(180deg, #FF9B2B 0%, #FF6000 100%);
    box-shadow: 0rpx 6rpx 16rpx 0rpx rgba(255, 80, 0, 0.57);
    border-radius: 48rpx;
    // position: fixed;
    // left: 64rpx;
    // bottom: 180rpx;
    font-size: 32rpx;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #FFFFFF;
    text-align: center;
    line-height: 96rpx;
    margin: 0 auto;
    margin-top: 300rpx;
    margin-bottom: 56rpx;
}
</style>